<template>
    <div class="user-container">
        <!-- 标题区域开始 -->
        <div class="title-wrap">
            <div class="left-wrap">
                <i class="iconfont icon-yonghu"></i>
                <span>个人信息</span>
            </div>
        </div>
        <!-- 标题区域结束 -->


        <!-- 内容区域开始 -->
        <div class="content-wrap" v-if="userStore.profile">
            <!-- 昵称 -->
            <div class="attribute-item" @click="showEditDrawer('nick', userStore.profile.user.nick, '修改昵称')">
                <span class="name">昵称</span>
                <div class="right">
                    <span class="value" v-if="userStore.profile.user.nick">{{ userStore.profile.user.nick }}</span>
                    <span class="value" v-else>未设置</span>
                    <i class="iconfont icon-xiangyoujiantou"></i>
                </div>
            </div>

            <!-- 手机号 -->
            <div class="attribute-item" @click="showEditDrawer('mobile', userStore.profile.user.mobile, '修改手机号')">
                <span class="name">手机号</span>
                <div class="right">
                    <span class="value" v-if="userStore.profile.user.mobile">{{ userStore.profile.user.mobile }}</span>
                    <span class="value" v-else>未设置</span>
                    <i class="iconfont icon-xiangyoujiantou"></i>
                </div>
            </div>


            <!-- 邮箱 -->
            <div class="attribute-item" @click="showEditDrawer('email', userStore.profile.user.email, '修改邮箱')">
                <span class="name">邮箱</span>
                <div class="right">
                    <span class="value" v-if="userStore.profile.user.email">{{ userStore.profile.user.email }}</span>
                    <span class="value" v-else>未设置</span>
                    <i class="iconfont icon-xiangyoujiantou"></i>
                </div>
            </div>

            <!-- 性别 -->
            <div class="attribute-item" @click="showEditDrawer('gender', userStore.profile.user.gender, '修改性别')">
                <span class="name">性别</span>
                <div class="right">
                    <span class="value" v-if="userStore.profile.user.gender && userStore.profile.user.gender == 1">男</span>
                    <span class="value" v-else-if="userStore.profile.user.gender && userStore.profile.user.gender == 0">女</span>
                    <span class="value" v-else>未设置</span>
                    <i class="iconfont icon-xiangyoujiantou"></i>
                </div>
            </div>

            <!-- 版本 -->
            <div class="attribute-item">
                <span class="name">版本</span>
                <div class="right">
                    <span class="value">v1.0.0</span>
                    <i class="iconfont icon-xiangyoujiantou"></i>
                </div>
            </div>
        </div>
        <!-- 内容区域结束 -->


        <!-- 编辑弹层开始 -->
        <el-drawer v-model="drawer" size="26%" :close-on-click-modal="false">
            <template #header>
                <div class="header-wrap">{{title}}</div>
            </template>

            <template #default>
                <div class="content-wrap">
                    <el-form :model="formData" style="width: 100%;">
                        <!-- 昵称 -->
                        <el-form-item label="昵称" :label-width="formLabelWidth" v-if="editAttr == 'nick'">
                            <el-input v-model="formData.nick" autocomplete="off" maxlength="100"
                show-word-limit clearable placeholder="请输入昵称"/>
                        </el-form-item>

                        <!-- 手机号 -->
                        <el-form-item label="手机号" :label-width="formLabelWidth" v-if="editAttr == 'mobile'">
                            <el-input v-model="formData.mobile" autocomplete="off" maxlength="11"
                show-word-limit clearable placeholder="请输入手机号"/>
                        </el-form-item>

                        <!-- 邮箱 -->
                        <el-form-item label="邮箱" :label-width="formLabelWidth" v-if="editAttr == 'email'">
                            <el-input v-model="formData.email" autocomplete="off" show-word-limit clearable placeholder="请输入邮箱"/>
                        </el-form-item>

                        <!-- 性别 -->
                        <el-form-item label="性别" :label-width="formLabelWidth" v-if="editAttr == 'gender'">
                            <el-switch v-model="formData.gender" active-text="男" active-value="1" inactive-text="女" inactive-value="0" />
                        </el-form-item>
                        
                    </el-form>
                </div>
            </template>

            <template #footer>
                <div>
                    <el-button @click="drawer = false">取消</el-button>
                    <el-button type="primary" @click="handlerConfirm">确定</el-button>
                </div>
            </template>
        </el-drawer>
        <!-- 编辑弹层结束 -->
    </div>
</template>

<script setup>
import { ref, reactive } from "vue"

import { useUserStore } from "@/stores/modules/user"

import { ElMessage, ElNotification } from 'element-plus'


// -------------------- 定义全局变量开始 --------------------
// 用户存储
const userStore = useUserStore()

const drawer = ref(false)

// 定义标题
const title = ref('')

const formData = reactive({
    nick: '',
    mobile: '',
    email: '',
    gender: '0'
})

// 表单标签宽度
const formLabelWidth = ref('80px')
// -------------------- 定义全局变量结束 --------------------



// ---------------------- 编辑属性开始 ----------------------
const editAttr = ref('')
const showEditDrawer = (key, val, txt) => {
    formData.nick = ''
    formData.mobile = ''
    formData.email = ''
    formData.gender = '0'

    editAttr.value = key
    switch (key) {
        case 'nick':
            formData.nick = val
            break;
        case 'mobile':
            formData.mobile = val
            break;
        case 'email':
            formData.email = val
            break;
        case 'gender':
            formData.gender = val + ''
            break;
        default:
            break;
    }
    title.value = txt
    drawer.value = true
}

// 处理确认修改
const handlerConfirm = async () => {
    switch (editAttr.value) {
        case 'nick':
            await userStore.modifyNick({nick: formData.nick})
            break;
        case 'mobile':
            if (!/^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$/.test(formData.mobile)) {
                ElMessage.error('请输入正确格式的手机号！')
                return false
            }

            await userStore.modifyMobile({mobile: formData.mobile})
            break;
        case 'email':
            if (!/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(formData.email)) {
                ElMessage.error('请输入正确格式的邮箱！')
                return false
            }

            await userStore.modifyEmail({email: formData.email})
            break;
        case 'gender':
            await userStore.editOtherInfo({gender: formData.gender})
            break;
    
        default:
            break;
    }

    ElNotification({type: 'success', message: '修改成功'})
    drawer.value = false
}
// ---------------------- 编辑属性结束 ----------------------

</script>

<style scoped lang="scss">
.user-container {
    background-color: #fff;
    padding: 0 15px 15px 15px;
    .title-wrap {
        padding: 15px 0;
        font-size: 18px;
        border-bottom: 1px solid #f5f5f5;
        color: $main-color;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left-wrap {
            display: flex;
            align-items: center;
            .iconfont {
                font-size: 24px;
                margin-right: 5px;
            }
        }
    }

    .content-wrap {
        .attribute-item {
            display: flex;
            justify-content: space-between;

            align-items: center;

            padding: 20px 30px;

            cursor: pointer;

            border-bottom: 1px solid #f5f5f5;

            &:last-child {
                border-bottom: none;
            }

            .name {
                font-size: 14px;
                font-weight: bold;
            }

            .right {
                .value {
                    color: #999;
                }
            }
        }
    }

    ::v-deep(.el-drawer__header) {
        margin-bottom: 0;
        padding-bottom: 12px;
        border-bottom: 1px solid #f5f5f5;
    }

    .header-wrap {
        font-weight: bold;
        text-align: center;
    }
}
</style>